<template>
	<view>
		<w-picker  v-if="selectList.length!=0" mode="selector"  :defaultVal="[1]"  @confirm="onConfirm"  ref="selector"  themeColor="#f00" :selectList="selectList" ></w-picker>

		<view class="uni-padding-wrap">
			<form @submit="formSubmit" >
					<view class="cu-form-group1">
						<view class="un-invoice-text">发票类型</view>
						<radio-group class="uni-flex" name="type" @change="radioChange">
							<label :class="{label:type==='电子普通发票'}">
								<radio value="电子普通发票" color="#E02E24" style="transform:scale(0.8)" v-show="false" />电子普通发票
							</label>
							<label style="margin-left: 50upx;" :class="{label:type==='纸质普通发票'}">
								<radio value="纸质普通发票" color="#E02E24" style="transform:scale(0.8)" v-show="false" />纸质普通发票
							</label>
						</radio-group>
						<view class="un-invoice-text">
							电子发票即电子增值税发票，是税局认可的有效凭证，其法律效力、基本用途及使用规定同纸质发票。
						</view>
					</view>
				
					<view class="cu-form-group" style="margin-top: 25upx;">
						<view class="title">*发票抬头</view>
						<input placeholder="请填写发票抬头" name="title" :value="user.title"></input>
					</view>
					
					<view class="cu-form-group">
						<view class="title">*发票内容</view>
						<input placeholder="请选择发票内容" name="detail" :value="detailValue==''?'商品明细':detailValue" @tap="showDetail"></input>
						<text class="yticon icon-you un-icon"></text>
					</view>
					
					<view class="cu-form-group " style="margin-top: 25upx;">
						<view class="title">*收票人手机</view>
						<input placeholder="请输入收票人手机" name="phone"  :value="user.phone"></input>
					</view>
					
					<view class="cu-form-group">
						<view class="title">*收票人邮箱</view>
						<input placeholder="请输入收票人邮箱" name="email" :value="user.email"></input>
					</view>
				
					<view class="uni-btn-v uni-common-mt">
						<button class="btn-submit" formType="submit" type="primary">保存</button>
					</view>
				
					<view class="invoice-text">
						<view ><text class="iconfont icon-tanhao un-icon1"></text>发票须知：</view>
						<view >1.开票金额为用户实际支付金额(不含礼品卡)</view>
						<view >2.电子发票可在确认收货后，在“订单详情“查看</view>
						<view >3.未随箱寄出的纸质发票会在发货后15-30个工作日单独寄出</view>
						<view >4.单笔订单只支持开具一种发票类型，如需增值税专用发票请联系客服处理</view>
						<view >5.年购订单发票随每期子单寄出</view>
					</view>
			</form>
		</view>
	</view>
</template>

<script>
	//来自 graceUI 的表单验证， 使用说明见手册 http://grace.hcoder.net/doc/info/73-3.html
	var  graceChecker = require("../../common/graceChecker.js");
	import wPicker from "@/components/w-picker/w-picker.vue";
	export default {
		components:{
			wPicker,
		},
		data() {
			return {
				detailValue:'',
				mode:'',
				selectList:[
					{label:"商品明细",value:"1"},
					
				],
				type:'电子普通发票',
				user:{title:'老家河南',detail:{label:"日用品",value:"2"},phone:'18737123185',email:'110@119.com'},
			}
		},
		onLoad() {
			this.selectList.push(this.user.detail);
			uni.startPullDownRefresh();
		},
		onPullDownRefresh() {
			console.log('refresh');
			setTimeout(function () {
				uni.stopPullDownRefresh();
			}, 1000);
		},
		methods: {
		
			formSubmit: function (e) {
				
				//将下列代码加入到对应的检查位置
				//定义表单规则
				var rule = [
					{name:"type", checkType : "notnull", checkRule:"",  errorMsg:"请选择发票类型"},
					{name:"title", checkType : "string", checkRule:"1,",  errorMsg:"请填写发票抬头"},
					{name:"detail", checkType : "notnull", checkRule:"",  errorMsg:"请选择发票内容"},
					{name:"phone", checkType : "phoneno", checkRule:"",  errorMsg:"请输入正确的收票人手机"},
					{name:"email", checkType : "email", checkRule:"",  errorMsg:"请输入正确的收票人邮箱"},
				];
				//进行表单检查
				var formData = e.detail.value;
				var checkRes = graceChecker.check(formData, rule);
				if(checkRes){
					
					uni.showToast({title:"验证通过!", icon:"none"});
				}else{
					uni.showToast({ title: graceChecker.error, icon: "none" });
				}
			},
			//选择发票类型{
				radioChange: function(evt) {
					console.log(evt.target.value)
					this.type=evt.target.value;
            },
			//展示发票内容
			showDetail(){
				this.mode='selector';
				this.$refs[this.mode].show();
			},
			//选择发票内容
			onConfirm(val){
				console.log(val);
				this.detailValue=val.result;
			},
		},
		//点击导航栏 buttons 时触发
		onNavigationBarButtonTap() {
				uni.navigateTo({
					url: '/pages/invoice/invoiceHelp/invoiceHelp'
				})
		},
	}
</script>

<style lang="scss">
	page {
			background: #f5f5f5;
	}
	.btn-submit{
		background-color: #E02E24;
		margin: 40upx 60upx;
	}
	.cu-form-group1 {
		background-color: #ffffff;
		padding: 30upx 50upx 40upx;
		display: block;
		align-items: center;
		min-height: 100upx;
		justify-content: space-between;
		position: relative;
		border-top: 1upx solid #eee;
		border-bottom: 1upx solid #eee;
		.un-invoice-text{
			color: #999999;
			font-size: 25upx;
			line-height: 40upx;
		}
	}
	
	.cu-form-group {
		background-color: #ffffff;
		padding: 1upx 50upx;
		display: flex;
		align-items: center;
		min-height: 100upx;
		justify-content: space-between;
		position: relative;
		border-top: 1upx solid #eee;
	}
	.cu-form-group+.cu-form-group {
		border-bottom: 1upx solid #eee;
	}
	.cu-form-group .title {
		text-align: justify;
		font-size: 28upx;
		position: relative;
		height: 60upx;
		line-height: 60upx;
		min-width: calc(4em + 15px);
		color: #999999;
	}
	.cu-form-group .un-icon{
		position: absolute;
		left: 650upx;
	}
	input{
		width: 450upx;
		font-size: 28upx;
		color: #666666;
	}
	.uni-flex {
		display: flex;
		flex-direction: row;
		margin: 25upx 0upx;
		font-size: 28upx;
		label{
			border:  1upx solid #999999;
			border-radius: 10upx;
			color: #999999;
			font-size: 25upx;
			padding: 20upx 77upx;
		}
		.label{
			border:  1upx solid #F04844;
			color: #F04844;
		}
	}
	.invoice-text{
		padding: 0upx 55upx;
		color: #999999;
		font-size: 25upx;
		line-height: 50upx;
		.un-icon1{
			margin-right: 10upx;
			font-size: 28upx;
		}
	}
</style>
